fix(modal): prevent double safe-area in fullscreen modals with ion-content (#31015)#31051
fix(modal): prevent double safe-area in fullscreen modals with ion-content (#31015)#31051Vitalcheffe wants to merge 2 commits intoionic-team:mainfrom
Conversation
…ntent applyFullscreenSafeArea() was applying wrapper-level padding-bottom for modals with ion-content but no ion-footer. Since ion-content already handles bottom safe-area internally via its scroll container, this created double compensation — visible as a white gap at the bottom of fullscreen modals on iOS devices with home indicators. Fix: skip wrapper padding when ion-content is present, since it already manages its own safe-area insets. Only apply wrapper padding for custom modals with raw HTML that lack ion-content. Fixes ionic-team#31015
|
@Vitalcheffe is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
|
Thanks for the investigation here, the root cause in #31015 is spot on. There's an e2e test failing in CI from this though. Check shard 11, specifically In general when changing a condition in a function, it's worth checking if there are tests covering the other branches too, not just the scenario you're fixing. Running |
ShaneK
left a comment
ShaneK
left a comment
There was a problem hiding this comment.
Thanks for your PR! There's a few issues with this, mostly in that it was untested and affects cases other than the intended one.
…ntent - ion-content handles bottom safe-area internally via its scroll container - Previously, wrapper padding was applied when hasContent && !hasFooter, causing double compensation visible as a white gap on iOS - Now skips wrapper padding whenever ion-content is present - Raw HTML modals (no content, no footer) remain untouched as before - Fixes ionic-team#31015
|
Good catch — the original flip was too aggressive. Updated the logic to be explicit:
This correctly fixes the double compensation for |
|
The existing e2e test still isn't updated and will fail in CI again once the full suite runs on this commit, same as last time. Your If you're able to run the tests locally ( |
2 participants
Problem
After upgrading from @ionic/angular 8.7.17 to 8.8.1, fullscreen modals with ion-content but no ion-footer display a white gap at the bottom on iOS devices with a home indicator.
This is a regression from PR #30949, which added applyFullscreenSafeArea(). The function applies wrapper-level padding-bottom for modals with ion-content and no ion-footer. However, ion-content already handles bottom safe-area internally via its scroll container, creating double compensation.
Root cause
The condition "if (!hasContent || hasFooter) return" means padding is applied when hasContent && !hasFooter. But ion-content already manages its own safe-area insets, so the wrapper-level padding creates an extra offset.
Fix
Changed the condition to "if (hasContent || hasFooter) return" — skip wrapper padding when ion-content is present (it handles safe area internally) or when ion-footer is present (it handles its own padding). Only apply wrapper padding for custom modals with raw HTML that lack both.
Impact
Fixes #31015